<template>
	<view class="" style="padding: 30rpx;">
		<view class="calendar-box">
			<view class="calendar-top-box">
				<image class="calendar-img" @click="changeSub" src="/static/calendar-left.png"></image>
				<view class="calendar-top-title">{{formatMonth(todayMonth)}}</view>
				<image class="calendar-img" @click="changeAdd" src="/static/calendar-right.png"></image>
			</view>
			<view class="calendar-week-box">
				<view class="week-title" v-for="(item,index) in weekList" :key="index">{{item}}</view>
			</view>
			<view class="calendar-center-box">
				<view class="calendar-center-tiem" :style="[index == 0 && oneDayClass,item.bgColor] "
					v-for="(item,index) in monthArr" :key="index" @click="changeMonthIndex(item)">
					{{index + 1}}
					<view class="spot" v-if="monthIndex == index"></view>
				</view>
			</view>
			

		</view>
		<view class="calendar-box">
			<view class="title">
				打卡伙伴({{curdate}})
			</view>
			<view class="" v-if="!isFuture">
				<view class="history-list" v-if="weightHistory.length>0">
					<view class="history-item" v-for="(item, index) in weightHistory" :key="index" @click="clickto('/pages/index/info?id='+item.userData.openid+'&nickname='+item.userData.nickName)">
						<u-avatar :src="item.userData.avatarUrl"></u-avatar>
						<view class="weight" style="flex: 1;margin-left: 20rpx;">{{item.userData.nickName}}</view>
						<view class="change" :class="item.dabiao >= 0 ? 'up' : 'down'">
							{{item.dabiao >= 0 ? '+' : ''}}{{item.dabiao.toFixed(2)}}kg
						</view>
					</view>
				</view>
				<view class="history-list" v-else>
					<u-empty mode="list" text='当日未小伙伴打卡'>
					</u-empty>
				</view>
			</view>
			<view class="history-list" v-else>
				<u-empty mode="list" text='未到打卡日期'>
				</u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import day from '@/static/day.js';
	import dayjs from '@/static/day.js'
	export default {
		components: {},
		data() {
			return {
				oneDay: 0,
				oneDayClass: '',
				tabIndex: 1,
				weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				monthArr: [],
				monthIndex: 0,
				todayMonth: dayjs().format("YYYY-MM-DD"), //当前月份
				datelist: [],
				weightHistory: [],
				isFuture: false,
				curdate: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd')
			};
		},
		watch: {

		},
		created(option) {
			this.getDaysArrayByMonth()
			this.$emit('change', {
				value: this.formatMonth()
			});
			this.$emit('checked', {
				value: this.todayMonth
			});
			this.changeMonthIndex({date:dayjs().format("YYYY-MM-DD")})
		},
		methods: {
			clickto(url){
				uni.navigateTo({
					url
				})
			},
			async changeMonthIndex(item) {
				this.isFuture= item.date > dayjs().format("YYYY-MM-DD")
				this.curdate=item.date
				if (this.isFuture) {
					return
				}
				try {
					const {
						result
					} = await uniCloud.callFunction({
						name: 'weight',
						data: {
							action: 'getuserWeight',
							token: uni.getStorageSync('jfToken'),
							data: {
								startTime: new Date(item.date + ' 00:00:00'),
								endTime: new Date(item.date + ' 23:59:59')
							}
						}
					})
					if (result.code === 0) {
						this.weightHistory = result.data.map((item1, index1) => {
							return{
								...item1,
								dabiao:item1.records[0].weight-item1.userData.mb.mbweight
							}
						})
					}
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				}
			},
			//切换tab
			changeTab(e) {
				this.tabIndex = e
			},
			//获取获取上个月
			changeSub(e) {
				this.todayMonth = dayjs(this.todayMonth).add(-1, 'month').startOf('month').format('YYYY-MM-DD')
				this.monthIndex = 0
				this.$emit('change', {
					value: this.formatMonth()
				});
				this.$emit('checked', {
					value: this.monthArr[0].date
				});
				this.getlist(new Date(this.formatMonth() + '-01 00:00:00'), new Date(this.formatMonth() + '-31 23:59:59'))
			},
			//获取获取下个月
			changeAdd(e) {
				this.todayMonth = dayjs(this.todayMonth).add(1, 'month').startOf('month').format('YYYY-MM-DD')
				this.monthIndex = 0

				this.$emit('change', {
					value: this.formatMonth()
				});
				this.$emit('checked', {
					value: this.monthArr[0].date
				});
				this.getlist(new Date(this.formatMonth() + '-01 00:00:00'), new Date(this.formatMonth() + '-31 23:59:59'))
			},
			//月份格式化
			formatMonth() {
				return dayjs(this.todayMonth).format('YYYY-MM')
			},
			//获取当前月份包含的天数
			getDaysArrayByMonth() {
				//获取当前月份包含的天数
				var daysInMonth = dayjs(this.todayMonth).daysInMonth();
				var start = 1
				var monthArr = []
				//循环获取月份里的日期
				while (daysInMonth >= start) {
					var current = dayjs(this.todayMonth).date(start);
					monthArr.push({
						date: current
					});
					start++;
				}
				monthArr.forEach((item, index) => {
					monthArr[index].date = item.date.format("YYYY-MM-DD")
					monthArr[index].bgColor = this.getDayBgColor(monthArr[index].date)

					if (dayjs(monthArr[index].date).format("YYYY-MM-DD") == dayjs().format("YYYY-MM-DD")) this
						.monthIndex = index
					this.datelist.map(t => {
						if (dayjs(t.date).format('YYYY-MM-DD') == monthArr[index].date) {
							monthArr[index].bgColor = {
								"background": '#1fabfe',
								"color": "#FFFFFF"
							}
						}
					})
				});
				this.getDaysWeek(monthArr[0].date)
				this.monthArr = monthArr

			},
			//获取当前星期几
			getDaysWeek(e) {
				var oneDay = dayjs(e).day() + 1 || 0
				this.oneDayClass = {
					'grid-column-start': oneDay
				}
			},
			//获取背景色
			getDayBgColor(date, datelist) {
				// 这里应该还缺少早退的颜色，待确定
				var colorList = ['#1fabfe', '#f5a000', '#FF6E6E', '#A07AFF']
				var isWeek = dayjs(date).day()
				//表示今天之前或者以后
				var isToday = dayjs().format("YYYY-MM-DD") == date
				if (isToday) return {
					"border": "1rpx solid #20ABFF",
					"color": "#20ABFF"
				}
				//表示未来
				var isFuture = date > dayjs().format("YYYY-MM-DD")
				//周六，周日，大于今天的
				if (isFuture) return {
					"background": "#f1f1f1"
				}
				return {
					"background": colorList[2],
					"color": "#FFFFFF"
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #7fde9e;
	}

	.spot {
		display: flex;
		margin: 8rpx auto 0;
		width: 8rpx;
		height: 8rpx;
		background-color: #20ABFF;
		border-radius: 50%;
	}

	.calendar-box {
		overflow: hidden;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 6rpx 0px rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		margin-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			line-height: 80rpx;
			text-align: center;
		}

		.calendar-top-box {
			display: flex;
			justify-content: center;
			margin: 16rpx 0;

			.calendar-top-title {
				width: 240rpx;
				text-align: center;
				height: 64rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #20ABFF;
				line-height: 64rpx;
				margin: 0 64rpx;
			}

			.calendar-img {
				height: 32rpx;
				width: 32rpx;
				margin: 16rpx 0;
			}
		}

		.calendar-week-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			margin: 0 40rpx;
			grid-gap: 24rpx;

			.week-title {
				width: 64rpx;
				text-align: center;
				height: 42rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #C5C5C5;
				line-height: 42rpx;
			}
		}

		.calendar-center-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			margin: 24rpx 40rpx;
			grid-gap: 36rpx;

			.week-title {
				// width: 62px;
				text-align: center;
				height: 42rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #C5C5C5;
				line-height: 42rpx;
			}

			.calendar-center-tiem {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				line-height: 56rpx;
				text-align: center;

				font-size: 32rpx;
				color: #666666;
			}
		}

		.calendar-bottom-box {
			margin: 32rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.calendar-bottom-item {
				.blue-span {
					display: block;
					width: 20rpx;
					height: 20rpx;
					background-color: #20ABFF;
					border-radius: 50%;
					margin: auto 16rpx auto 0;
				}

				.purple-span {
					display: block;
					width: 20rpx;
					height: 20rpx;
					background-color: #A07AFF;
					border-radius: 50%;
					margin: auto 16rpx auto 0;
				}

				.yellow-span {
					display: block;
					width: 20rpx;
					height: 20rpx;
					background-color: #F5A000;
					border-radius: 50%;
					margin: auto 16rpx auto 0;
				}

				.red-span {
					display: block;
					width: 20rpx;
					height: 20rpx;
					background-color: #FF6E6E;
					border-radius: 50%;
					margin: auto 16rpx auto 0;
				}

				display: flex;
				height: 42rpx;
				font-size: 28rpx;
				color: #535353;
				line-height: 42rpx;

			}
		}
	}

	.history-list {
		padding: 0 30rpx;

		.history-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.date {
				font-size: 24rpx;
				color: #666;
			}

			.weight {
				font-size: 28rpx;
				font-weight: bold;
			}

			.change {
				font-size: 24rpx;

				&.up {
					color: #ff4d4f;
				}

				&.down {
					color: #018d71;
				}
			}
		}
	}
</style>